var slide = function(width,height,boxWidth,pics){
			self=this;
			this.width = width;
			this.height=height;
			this.boxWidth=boxWidth;
			this.pics= pics;
			this.div = document.getElementById('box');	
			this.ul = this.div.children[0];
		this.num =Math.floor(this.width/boxWidth);
		this.nav = this.div.children[1];
		this.run=function(){
			this.createBoxLi();
			this.createTextBtn();
			this.addEventBtn();
		}
		//添加按钮事件
		this.addEventBtn=function(){
			var btns = this.nav.children;
			for(var n=0;n<btns.length;n++)
			{
				btns[n].onclick=(function(index){
					var lis = self.ul.children;
					return function(){
						for(var i=0;i<lis.length;i++)
						{
							lis[i].style.transform="rotateX(-"+(index*90)+"deg)";
							lis[i].style.transitionDuration="2s";
							lis[i].style.transitionDelay=i*50+'ms';
						}
					}
				})(n);
			}
		}
		this.createTextBtn=function(){
			var html ="";
			for(var n=0;n<this.pics.length;n++)
			{
				html+="<span>"+(n+1)+"</span>";
			}
			this.nav.innerHTML=html;
		}

		this.createBoxLi=function(){
			for(var i=0;i<this.num;i++)
			{
				var li='<li style="width:'+this.boxWidth+'px;height:'+this.height+'px">';
				for(var n=0;n<this.pics.length;n++){
					var style="width:"+(this.boxWidth)+"px;height:"+this.height+"px;background:url("+this.pics[n].img+");background-position:-"+(i*this.boxWidth)+"px 0px;";
					li+='<a href="'+this.pics[n].url+'" style="'+style+'"></a>';
				}					
				li+="</li>";
				this.ul.innerHTML+=li;
				}
			}
}
pic=[
	{img:'img/1.jpg','url':'#'},
	{img:'img/2.jpg','url':'#'},
	{img:'img/3.jpg','url':'#'},
	{img:'img/4.jpg','url':'#'},
];
var obj = new slide(800,480,25,pic);
obj.run();